<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $(".delete").click(function () {

                var $tr = $(this).parent().parent();
                var title = $.trim($tr.find("td:first").text());
                var flag = confirm("确定要删除" + title + "的信息吗?");

                if (flag) {
                    return true;
                }

                return false;
            });


//            $("a").click(function () {
//                var serializeVar = $(":hidden").serialize();
//                var url = this.href + "&" + serializeVar;
//                window.location.href = url;
//                return false;
//            });

            $("a").each(function () {
                this.onclick = function () {
                    var serializeVar = $(":hidden").serialize();
                    var url = this.href + "&" + serializeVar;
                    window.location.href = url;
                    return false;
                }
            });

            //ajax修改单个商品的数量
            //1.获取页面中所有的text，并为其添加onchange响应函数，弹出对话框：确定要修改吗？
            $(":text").change(function () {
                var quantityVal = $.trim(this.value);
                var flag1 = false;
                var reg = /^\d+$/g;
                var quantity = -1;
                if (reg.test(quantityVal)) {   //检验填的值是否合法
                    quantity = parseInt(quantityVal);
                    if (quantity >= 0) {
                        flag1 = true;
                    }
                }

                if (!flag1) {
                    alert("输入的数量不合法！");
                    $(this).val($(this).attr("class"));
                    return;
                }

                var $tr = $(this).parent().parent();
                var title = $.trim($tr.find("td:first").text());

                if (quantity == 0) {
                    var flag3 = confirm("确定要删除" + title + "吗？")
                    if (flag3) {
                        //得到a节点
                        var $a = $tr.find("td:last").find("a");
                        //执行a节点的onclick响应函数
                        $a[0].onclick();
                        return;
                    }
                    return;
                }

                var flag2 = confirm("确定要修改" + title + "的数量吗?");

                if (!flag2) {
                    $(this).val($(this).attr("class"));
                    return;
                }
                //2.请求地址：bookServlet
                var url = "bookServlet";

                //3.请求参数为：method：updateItemQuantity，id：name属性值，quantity：val，time：new Date()
                var idVal = $.trim(this.name);
                var args = {"method": "updateItemQuantity", "id": idVal, "quantity": quantityVal, "time": new Date()};

                //4.在updateItemQuantity方法中，获取quantity，id，在获取购物车对象，调用service的方法修改

                //5.传回JSON数据：bookNumber：xxx，totalMoney

                //6.更新当前页面的bookNumber和totalMoney
                $.post(url, args, function (data) {
                    var bookNumber = data.bookNumber;
                    var totalMoney = data.totalMoney;

                    $("#totalMoney").text("总金额：￥ " + totalMoney);
                    $("#bookNumber").text("您的购物车中共有" + bookNumber + "本书");
                }, "JSON");
            });
        });
    </script>
</head>
<body>

<input type="hidden" name="minPrice" value="${param.minPrice}"/>
<input type="hidden" name="maxPrice" value="${param.maxPrice}"/>

<center>
    <br/><br/>
    <div id="bookNumber">您的购物车中共有${sessionScope.ShoppingCart.bookNumber}本书</div>
    <table cellpadding="10">
        <tr>
            <td>书名</td>
            <td>数量</td>
            <td>价格</td>
            <td>操作</td>
        </tr>
        <c:forEach items="${sessionScope.ShoppingCart.items}" var="item">
            <tr>
                <td>${item.book.title}</td>
                <td><input class="${item.quantity}" type="text" size="1" value="${item.quantity}"
                           name="${item.book.id}"/></td>
                <td>${item.book.price}</td>
                <td>
                    <a href="bookServlet?method=remove&pageNo=${param.pageNo}&id=${item.book.id}" class="delete">删除</a>
                </td>
            </tr>
        </c:forEach>

        <tr>
            <td colspan="4" id="totalMoney">总金额：￥ ${sessionScope.ShoppingCart.totalMoney}</td>
        </tr>
        <tr>
            <td colspan="4">
                <a href="bookServlet?method=getBooks&pageNo=${param.pageNo}">继续购物</a>&nbsp;
                <a href="bookServlet?method=clearCart">清空购物车</a>&nbsp;&nbsp;
                <a href="">结账</a>&nbsp;&nbsp;
            </td>
        </tr>

    </table>

</center>

</body>
</html>
